<template>
    <div class="list">
        <!--顶部搜索-->
        <div class="top " >
            <div class="ipw">
            <div class="adw"  style="float: left;width: auto; min-width: 78px;min-height: 20px;  height: auto;">
                <!--<div class="ad" @click="$router.push({name:'adres'})"  v-model="adress" >{{adress}}</div>
                <div class="iconfont icon-down-trangle zuo" ></div>-->
            </div>

            <div class="inpw">
                <span class="iconfont icon-sousuo sous" ></span>
                <input type="text" placeholder="提示" class="iupt">
            </div>
            </div>
            <!--筛选-->
            <div class="xuan ">
                <div class="x" @click="drop('a')">区域 <span class="iconfont icon-down-trangle"></span></div>
                <div class="u" @click="drop('b')">租金 <span class="iconfont icon-down-trangle"></span></div>
                <div class="a" @click="drop('c')">户型 <span class="iconfont icon-down-trangle"></span></div>
                <div class="n" @click="drop('d')">更多 <span class="iconfont icon-down-trangle"></span></div>
            </div>
        </div>
        <!--筛选 点击显示-->
        <div class="hide">
            <!--<div class="x_hide "  v-show="showlayer.a">-->
            <cube-drawer class="x_hide "
                         ref="drawer"
                         title="请选择区域"
                         :data="data"
                         :selected-index="selectedIndex"
                         @change="changeHandler"
                         @select="selectHandler"
                         @cancel="cancelHandler"></cube-drawer>
            <!-- </div>-->
            <div class="u_hide " v-show="showlayer.b">
                <div v-for="(num,index) in money" :key="index" @click="getmoney(index)">{{num.m}}</div>

            </div>
            <div class="a_hide " v-show="showlayer.c">
                <div v-for="(roo,index) in room" :key="index" @click="getroom(index)">{{roo.ro}}</div>

            </div>
            <div class="n_hide " v-show="showlayer.d">
                <div v-for="(d,index) in duo" :key="index" @click="getdd(index)">{{d.ty}}</div>


            </div>
        </div>
        <!--房源-->
        <div class="list_h " >
            <div class="card  "  v-for="(item,index) in homelist" :key="index" @click="$router.push({name:'detail',query:{hid:item.hid }})" >
                <div class="img">
                    <!--<img :src="item.cover">-->
                    <div :style="{
                    width:'100%',
                    height:'100%',
                    backgroundImage:`url(${item.cover})`,
                    backgroundPosition:'center center',
                    backgroundSize:'cover',

                    }">
                    </div>
                </div>
                <div class="info ">
                    <div class="title" >{{item.htitle}}</div>
                    <div class="wei">
                        <span class="one">{{item.area}}</span>
                        <span class="two">{{item.haddress}}</span>
                    </div>
                    <div class="little ">
                        <span v-if="item.you_can == 1"> 整租</span>
                        <span class="he" v-else> 分租</span>
                    </div>
                    <div class="money ">
                        <span  v-if="item.you_can == 1">{{item.z_pay}}/元</span>
                        <span  v-else>{{item.f_pay}}/元</span>
                        <span class="hx" style="color: #c3c6c6;">{{item.htype}}</span>
                        <div style="color: #c3c6c6">{{item.hsquare}} ㎡ </div>
                    </div>
                </div>
            </div>
        </div>
        <!--底部-->
        <div class="footer">
            <div class="nav">
                <div class="nav_item" @click="$router.push({name:'bill_details'})">
                    <i class="iconfont icon-jiaofei"></i>
                    <li>缴费</li>
                </div>
                <div class="nav_item" style="color: #ff9800" @click="$router.push({name:'list'})">
                    <i class="iconfont icon-fangyuan" style="color: #ff9800" ></i>
                    <li>房源</li>
                </div>
                <div class="nav_item" style="margin-right: 0;" @click="touserhome">
                    <i class="iconfont icon-wodedangxuan"></i>
                    <li>我的</li>
                </div>
            </div>
        </div>
       <!-- <div ref="d">111</div>-->

    </div>
</template>

<script>
import { Indicator } from 'mint-ui';
import { provinceList, cityList, areaList } from './area';
import { Toast, Button } from 'mand-mobile';

export default {
  name: 'list',
  components: {
    [Button.name]: Button,
  },
  data() {
    return {
      homelist: '',
      adress: 'a3',
      showlayer: {
        a: false,
        b: false,
        c: false,
        d: false,
      },
      money: [
        { m: '500-800' },
        { m: '800-1000' },
        { m: '1000-1200' },
        { m: '1200-1500' },
        { m: '1500-2000' },
      ],
      room: [
        { ro: '单间' },
        { ro: '一室户' },
        { ro: '三室户' },
        { ro: '三室户' },
        { ro: '更多户型' },
      ],
      duo: [
        { ty: '合租' },
        { ty: '整租' },
      ],
      selectedIndex: [],
      data: [
        provinceList,
        [],
        [],
      ],
    };
  },
  created() {
    Toast.loading('载入中');
  },
  async mounted() {
    // console.log(this.$refs['d'])
    // this.$refs['d'].innerHTML='222';
    this.adress = this.$store.state.city ? this.$store.state.city : '南宁';
    const _res = await this.$api.post('/house/list');
    console.log(_res);
    if (!_res.data.state) { /* 当state等于0时,正常state=1   */
      Toast.loading('载入中');
      return false;
    }
    const _temarr = _res.data.data; /* 得到房间数组 */
    for (const v of _temarr) {
      if (v.h_img) {
        v.cover = v.h_img.split(',')[0];/* 给每个对象增加一个cover属性，给他图片组的第一个值 */
      }
    }
    console.log(_temarr);
    this.homelist = _temarr;
    Toast.hide();

    /* JSON.parse()string字符窜转换成数组 */
  },
  methods: {
    drop(index) {
      // 如果当前index 是展开的就隐藏
      if (this.showlayer[index]) { /* ture */
        this.showlayer[index] = false;
        if (index === 'a') {
          this.$refs.drawer.hide();
        }
      } else { /* false */
        for (const v in this.showlayer) {
          if (v === 'a' && this.showlayer[v]) {
            this.$refs.drawer.hide();
          }
          if (v !== index) {
            this.showlayer[v] = false;
          }
        }

        this.showlayer[index] = true;
        if (index === 'a') {
          this.$refs.drawer.show();
        }
      }
    },
    getmoney(index) {
      console.log(this.money[index].m);
      this.showlayer.b = false;
    },
    getroom(index) {
      console.log(this.room[index].ro);
      this.showlayer.c = false;
    },
    getdd(index) {
      console.log(this.duo[index].ty);
      this.showlayer.d = false;
    },
    changeHandler(index, item, selectedVal, selectedIndex, selectedText) {
      // fake request
      setTimeout(() => {
        let data;
        if (index === 0) {
          // procince change, get city data
          data = cityList[item.value];
        } else {
          // city change, get area data
          data = areaList[item.value];
        }
        // refill panel(index + 1) data
        this.$refs.drawer.refill(index + 1, data);
      }, 200);
    },
    selectHandler(selectedVal, selectedIndex, selectedText) {
      this.showlayer.a = false;
      console.log(selectedVal, selectedIndex, selectedText);
      /* this.$createDialog({
        type: 'warn',
        content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
        icon: 'cubeic-alert',
      }).show(); */
    },
    cancelHandler() {
      this.showlayer.a = false;
      console.log('cancel');
    },
    touserhome() { /*点击 我的*/
      if (this.$store.state.userinfo.uid) {
        this.$router.push({ name: 'usercenter' });
      } else {
        Toast.info('您未登陆，请先登陆');
        setTimeout(() => {
          Toast.hide();
        }, 2000);
        this.$router.push({ name: 'pwdLogin' });
      }
    },

  },
};
</script>

<style lang="scss" scoped>
    @import '@/css/public.scss';
    .list{
        display: flex;
        flex-direction:column;
        height: 100%;
        font-family:"Microsoft YaHei";
        .top{
            width: 100%;
            height: vw(80);
            border-bottom: 1px solid #fafafa;
            .ipw{
                width: 100%;
                height: vw(45);
                background: $public-color;
                .ad{
                    float: left;
                    margin-left: vw(20);
                    font-size: vw(14);
                    height: vw(45);
                    line-height: vw(45);
                }
                .zuo{
                    float: left;
                    height: 100%;
                    line-height: vw(45);
                    margin-right: vw(18);
                    margin-left: vw(2);
                    font-size: vw(12);
                    color: #2b2e30;
                }
                .inpw{
                    float: left;
                    height: vw(30);
                    width: vw(230);
                    margin-top: vw(6);
                    background-color: white;
                    border-radius: vw(15);
                    .sous{
                        height: vw(30);
                        line-height: vw(30);
                        font-size: vw(18);
                        color: #a4a7a9;
                        margin-right: vw(6);
                        margin-left: vw(10);

                    }
                    .iupt{
                        outline:none;
                        border:none;
                        width: vw(185);


                    }

                }
            }
            .xuan{
                margin-top: vw(15);
                height: vw(20);
                width: 100%;
                display: flex;
                justify-content: space-around;

                .x{
                    font-size: vw(14);
                    color: #787b7d;
                }
                .u{
                    font-size: vw(14);
                    color: #787b7d;
                }
                .a{
                    font-size: vw(14);
                    color: #787b7d;
                }
                .n{
                    font-size: vw(14);
                    color: #787b7d;
                }
            }
        }
        .hide{
            width: 100%;
            height: auto;
            background-color: white;
            z-index: 9;
            position: fixed;
            top: vw(80);
            left: 0;

            .x_hide{
                width: 100%;
                min-height: vw(667);
                background-color: white;
                height: auto;
                z-index: 9;
                div{
                    font-size: vw(12);
                    margin: vw(5) 0 vw(5) vw(5);
                }
            }
            .u_hide{
                width: 100%;
                min-height: vw(50);
                height: auto;
                z-index: 9;
                div{
                    font-size: vw(12);
                    margin: vw(5) 0 vw(5) vw(5);
                }
            }
            .a_hide{
                width: 100%;
                min-height: vw(50);
                height: auto;
                z-index: 9;
                div{
                    font-size: vw(12);
                    margin: vw(5) 0 vw(5) vw(5);
                }
            }
            .n_hide{
                width: 100%;
                min-height: vw(50);
                height: auto;
                z-index: 9;
                div{
                    font-size: vw(12);
                    margin: vw(5) 0 vw(5) vw(5);
                }
            }
        }
        .list_h{
            height:0;
            flex-grow:1;
            z-index:1;
            overflow:scroll;
            margin-top: vw(15);
            .card{
                width: 100%;
                height: vw(130);
                padding-left: vw(15);
                padding-top: vw(15);
                border-bottom: 1px solid #fafafa;
                .img{
                    width: vw(105);
                    height: vw(95);
                    float: left;
                    margin-right: vw(10);
                    img{
                        width: 100%;
                        height: 100%;
                    }

                }
                .info{
                    width: vw(230);
                    height: vw(95);
                    float: left;
                    .title{
                        height: vw(16);
                        font-size: vw(16);
                        line-height: vw(16);
                        text-align: left;
                        color: #4d4d4e;
                        font-weight: 600;
                        margin-bottom: vw(5);
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;

                    }
                    .wei{
                        height: vw(12);
                        font-size: vw(12);
                        line-height: vw(12);
                        color: #9c9f9f;
                        margin-bottom: vw(10);
                        .one{
                            line-height: vw(12);
                        }
                        .one:after{
                            content: "";
                            height: vw(12);
                            width: 2px;
                            background-color: #dde0e2;
                            display: inline-block;
                            margin-left: 10px;
                            margin-right: 10px;
                        }
                        .two{
                            width: vw(150);
                            height: 100%;
                            display: inline-block;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                        }
                    }
                    .little{
                        width: 100%;
                        height: vw(16);
                        .he{
                            display: inline-block;
                            height: 100%;
                            padding: 0 vw(5);
                            font-size: 12px;
                            line-height: vw(16);
                            text-align: center;
                            background-color: #fff7f0;
                            margin-right: vw(5);
                            color: #d99585;
                        }
                        span{
                            display: inline-block;
                            height: 100%;
                            padding: 0 vw(5);
                            font-size: 12px;
                            line-height: vw(16);
                            text-align: center;
                            background-color: #edf9ff;
                            margin-right: vw(5);
                            color: #8faeca;

                        }

                    }
                    .money{
                        width: 100%;
                        height: vw(16);
                        margin-top: 15px;
                        span{
                            display: inline-block;
                            height: 100%;
                            color: #a84119;
                            line-height: vw(16);
                        }
                        .hx{
                            font-size: vw(12);
                        }
                        span:after{
                            content: "";
                            height: vw(12);
                            width: 2px;
                            background-color: #dde0e2;
                            display: inline-block;
                            margin-left: 10px;
                            margin-right: 10px;
                        }
                        div{
                            display: inline-block;
                            font-size: vw(12);
                            height: 100%;
                            color: #a84119;
                            line-height: vw(16);
                        }
                    }
                }
            }
        }
        .footer{
            height: 54px;
            padding: vw(12) vw(43) 0 vw(43);
            .nav{
                .nav_item{
                    float: left;
                    width: vw(50);
                    margin-right: vw(65);
                    text-align: center;
                    i{
                        font-size: vw(21);
                        line-height: vw(21);
                        color:#8e8e8e;
                        text-align: center;
                    }
                    li{
                        margin-top: vw(5);
                        text-align: center;
                        font-size: vw(8);
                        line-height: vw(8);
                    }
                }
            }
        }

    }
</style>
